<template>
	<div>
		<router-link tag = "span" to = "/" class = "iconfont absBack" v-show = "showAbs">&#xe624;</router-link>
		<header v-show = "!showAbs" :style = "opacityStyle">
			<router-link tag = "div" to = "/" class = "back">
				<span class = "iconfont">&#xe624;</span>
			</router-link>
			<h2>景点详情</h2>
		</header>
	</div>
</template>

<script>
	export default {
		name : 'detailHeader',
		data () {
			return {
				showAbs : true,
				opacityStyle : {
					opacity : 0
				}
			}
		},
		methods : {
			winScroll () {
				const top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
				if(top > 60){
					let opacity = top/140;
					opacity = opacity > 1 ? 1 : opacity; 
					this.opacityStyle = { opacity };
					this.showAbs = false;
				} else {
					this.showAbs = true;
				}
			}
		},
		mounted () {
			// 配置keep-alive时,切换到该组件 会出现的生命周期函数
			window.addEventListener("scroll",this.winScroll)
		},
		unmounted () {
			// 该组件隐藏时的生命周期函数，用来解绑全局事件（其他页面滚动时也执行winScroll）
			window.removeEventListener("scroll",this.winScroll)
		}
	}
</script>

<style lang = "less" scoped>
	@import "~css/variable.less";
	.absBack {
		width:.8rem;
		height:.8rem;
		line-height:.8rem;
		text-align: center;
		color:#fff;
		position: absolute;
		top:.1rem;
		left:.1rem;
		background:rgba(0,0,0,.8);
		border-radius:50%;
	}
	header {
		height:@headerHeight;
		line-height:@headerHeight;
		background:@bgColor;
		text-align: center;
		color:#fff;
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:99;
		.back {
			width:.8rem;
			position: absolute;
			top:0;
			left:0;
		}
		h2 {
			font-size:.32rem;
		}
	}
</style>